<template>
  <div ref="centerContainer" class="center-container">
    <draggable v-model="store.coms" group="coms" itemKey="index">
      <template #item="{ element, index }">
        <div
          class="content mb-2 relative"
          :class="{ active: store.currentComIndex === index }"
          @click="clickCom(index)"
          :key="element.id"
          :ref="(el) => (componentRefs[index] = el)"
        >
          <component :is="element.type" :status="element.status" :serialNum="serialNum[index]" />
          <div v-show="store.currentComIndex === index" class="delete-btn absolute">
            <el-button
              type="danger"
              size="small"
              :icon="Close"
              circle
              @click.stop="rmCom(index)"
            ></el-button>
          </div>
        </div>
      </template>
    </draggable>
    <!-- <div
      v-for="(item, index) in store.coms"
      :key="index"
      class="content mb-2 relative"
      :class="{ active: store.currentComIndex === index }"
      @click="clickCom(index)"
    >
      <div class="delete-btn absolute" @click="rmCom(index)">111</div>
      <component :is="item.type" :status="item.status" :serialNum="1" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'
import { useEditorStore } from '@/stores/useEditor'
import EventBus from '@/utils/eventBus'
import { useSurveyNo } from '@/utils/hooks'
import type { ComponentPublicInstance } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useEditorStore()
// 获取题目编号
const serialNum = computed(() => useSurveyNo(store.coms).value)

const centerContainer = ref<HTMLElement | null>(null)
const componentRefs = ref<(Element | ComponentPublicInstance | null)[]>([])
// 滚动到最底部
const scrollToBottom = () => {
  nextTick(() => {
    const container = centerContainer.value // 获取容器的dom元素
    if (container) {
      window.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth',
      })
    }
  })
}
// 通过事件总线提供滚动方法给外部调用
EventBus.on('scrollToBottom', scrollToBottom)
// 滚动到中间
const scrollToCenter = (index: number) => {
  nextTick(() => {
    const element = componentRefs.value[index] // 获取当前题目的dom元素
    if (element instanceof HTMLElement) {
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      })
    }
  })
}
EventBus.on('scrollToCenter', scrollToCenter)

const clickCom = (index: number) => {
  // console.log('serialNum', serialNum)
  if (store.currentComIndex === index) {
    store.setCurrentComIndex(-1)
  } else {
    store.setCurrentComIndex(index)
  }
}
const rmCom = (index: number) => {
  ElMessageBox.confirm('确定删除该组件吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      store.rmCom(index)
      store.setCurrentComIndex(-1)
      // if (store.currentComIndex === index) {
      //   store.setCurrentComIndex(-1)
      // }
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}
</script>

<style scoped>
.center-container {
  width: 50%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin: 70px auto;
  padding: 20px;
  background: var(--white);
  position: relative;
  .content {
    cursor: pointer;
    padding: 10px;
    background-color: var(--white);
    border-radius: var(--border-radius-sm);
    &:hover {
      transform: scale(1.01);
      transition: 0.5s;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }
}
.active {
  transform: scale(1.01);
  transition: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.delete-btn {
  right: -5px;
  top: -10px;
}
</style>
